<div>
  <div class="row">
    <div class="col-sm-4 text-color-gray mt-2">
      <strong>
        Response Summary <span *ngIf="isStudent">(of received responses) </span>
      </strong>
      <span container="body" [ngbTooltip]="'Format: Response percentage (Response count)' + (hasWeights ? '[Weight of option]' : '') + ', e.g. 50% (2) ' + (hasWeights ? '[1.0]' : '')" class="fa fa-info-circle"></span>
    </div>
    <div class="col-sm-8 form-check" style="text-align: right;">
      <label class="form-check-label">
        <input id="exclude-self-checkbox" type="checkbox" [(ngModel)]="excludeSelf" (ngModelChange)="getTableData()" class="form-check-input"> <span container="body" class="ngb-tooltip-class" ngbTooltip="Excludes giver's responses to himself/herself from statistics">Exclude self evaluation</span>
      </label>
    </div>
  </div>
  <div class="row mb-4">
    <div id="rubric-statistics" class="col-sm-12 table-responsive">
      <tm-sortable-table [rows]="summaryRowsData"
                         [columns]="summaryColumnsData"
      ></tm-sortable-table>
    </div>
  </div>
  <ng-container *ngIf="isWeightStatsVisible">
    <div class="row">
      <div class="col-sm-4 text-color-gray">
        <strong>
          Per Recipient Statistics (Per Criterion)
        </strong>
        <span ngbTooltip="Format: Response percentage (Response count) [Weight of option], e.g. 50% (2) [1.0]" class="fa fa-info-circle"></span>
      </div>
    </div>
    <div class="row">
      <div id="rubric-recipient-statistics-per-criterion" class="col-sm-12 table-responsive mb-4">
        <tm-sortable-table [rows]="perRecipientPerCriterionRowsData"
                           [columns]="perRecipientPerCriterionColumnsData"
        ></tm-sortable-table>
      </div>
    </div>
    <div>
    <div class="row">
      <div class="col-sm-4 text-color-gray">
        <strong>
          Per Recipient Statistics (Overall)
        </strong>
        <span ngbTooltip="Assumption: all the questions are equally weighted;" class="fa fa-info-circle"></span>
      </div>
    </div>
    <div class="row">
      <div id="rubric-recipient-statistics-overall" class="col-sm-12 table-responsive mb-4">
        <tm-sortable-table [rows]="perRecipientOverallRowsData"
                           [columns]="perRecipientOverallColumnsData"
        ></tm-sortable-table>
      </div>
    </div>
    </div>
  </ng-container>

</div>
